<template>
    <view class="uni-shadow member" @tap.stop="detail">
        <view class="u-m-b-10 u-flex u-row-between title-box">
            <view class="u-flex u-font-26">
                <text class="font-bold u-line-1" style="max-width:200rpx" @longtap="longTap(memberItem.name)">{{memberItem.name}}</text>
                <text class="u-m-l-30">{{memberItem.sex}}</text>
                <u-button v-if="memberItem.smrz" class="u-m-l-20 btn" 
                    :type="memberItem.smrz=='未认证'?'warning':'success'" size="mini" :text="memberItem.smrz">
                </u-button>
                <text v-if="memberItem.ryzt=='待进场'" class="u-m-l-20" style="color:#f0ad4e">{{memberItem.ryzt}}</text>
                <text v-else-if="memberItem.ryzt=='进场'" class="u-m-l-20" style="color:#4cd964">{{memberItem.ryzt}}</text>
                <text v-else class="u-m-l-20" style="color:#dd524d">{{memberItem.ryzt}}</text>
            </view>
        </view>
        <view class="u-flex u-flex-wrap item-box">
            <view v-for="(item,index) in memberItem.list" :key="index" 
                class="u-m-t-20 u-flex u-font-26 item"
                :style="{width:item.span+'%'}">
                <text class="u-m-r-16 uni-dec-color">{{item.title}}</text>
                <text v-if="item.field=='attendance'" :class="[item.value=='已打卡'?'uni-higt-color':'uni-gery-color']">{{item.value}}</text>
                <text v-else-if="item.field=='salary'" :class="[item.value=='已发放'?'uni-higt-color':'uni-gery-color']">{{item.value}}</text>
                <text v-else class="u-line-1" :style="{maxWidth:index==0?'80%':'60%'}" @longtap="longTap(item.value)">{{item.value}}</text>
            </view>
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>


<script>
import tools from '@/tools/tools.js'
export default {
    name: 'memberItem',
    props: {
        listItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },

    data(){
        return{
            memberItem:{
                name: '安薪乐', // xm
                sex: '男', // xb
                ryzt: '安薪乐',
                smrz: '安薪乐', 
                list :[
                    { field:'gcmc', title:'项目名称', span:100, value:'安薪乐' },
                    { field:'zjhm', title:'证件号码', span:60, value:'安薪乐' },
                    { field:'districtName', title:'所属区划', span:40, value:'安薪乐' },
                    { field:'bzmc', title:'班组名称', span:50, value:'安薪乐' },
                    { field:'zwzc', title:'角色工种', span:50, value:'安薪乐' }, 
                    { field:'attendance', title:'当天考勤', span:50, value:'安薪乐' },
                    { field:'salary', title:'本月工资', span:50, value:'安薪乐' }
                ]
            },
        }
    },


    created(){
        // 处理数据格式
        this.memberItem.name = this.listItem.xm
        this.memberItem.sex = this.listItem.xb?this.listItem.xb:'未知'
        this.memberItem.smrz = this.listItem.smrz
        this.memberItem.ryzt = this.listItem.ryzt
        this.memberItem.list.map((v,i)=>{
            if( v.field == 'zjhm' ){
                v.value = tools.formatIdentity(this.listItem[v.field])
            }else{
                v.value = this.listItem[v.field]?this.listItem[v.field]:'暂无数据源'
            }
        })
    },


    methods: {
        // 长按事件
        longTap(value){
            uni.$u.toast(value,3000)
        },
        // 详情
        detail(){
            this.$emit('memberDetail')
        }
    },
}
</script>


<style lang="scss">
    .member{
        .title-box{
            width: 100%;
            .btn{
                width: auto;
                height: 36rpx;
                min-width: 90rpx;
                margin: 0;
            }
        }
    }
</style>